<template>
  <!-- 课堂 -->
  <div class="center-wrap ClassroomList" id="bili_classroom">
    <div class="space-between">
      <div class="classroom-left">
        <StoreyTitle :title="title">
          <svg slot="svg" t="1595049285996" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="19156" width="200" height="200">
            <path d="M436.2 921.5c-6.3 1.2-12.5 2.1-18.6 2.3 6.2 0 12.4-1.2 18.6-2.3z" fill="#E60012" p-id="19157"></path>
            <path d="M603.6 675.6l-34.4 33.9c-13.9 13.7-37.4 8-43.5-10.6l-13.1-40c-14.5-44.4-71.3-57.2-103.4-23.2l-28.4 30c-13.2 13.9-36.4 9.5-43.5-8.3l-21.7-54.1c-15.3-38-62.7-50.8-95-25.7l-67 52.1-4.4 19.2c-9.2 40.2 4.5 82.3 35.6 109.4l123 107c1.9-0.5 102-26.9 176.7 44.2l-40.1 10.7c0.6-0.2 1.3-0.1 1.9-0.3l203-55.2c39.8-10.8 70.5-42.7 79.7-83l1.5-6.7-25-75.1c-14.6-43.2-69.4-56.4-101.9-24.3z"
              fill="#FDBA3E" p-id="19158"></path>
            <path d="M443.3 920.6l1-0.3c-2.7 0.7-5.4 0.7-8.1 1.2 2.4-0.5 4.7-0.3 7.1-0.9z" fill="#E60012" p-id="19159"></path>
            <path d="M417.6 923.8c6.1-0.2 12.3-1.2 18.6-2.3 2.7-0.5 5.4-0.5 8.1-1.2l40.1-10.7c-74.7-71.1-174.8-44.7-176.7-44.2l35.7 31.1c20.8 18.1 47.3 27.5 74.2 27.3z"
              fill="#FF7C20" p-id="19160"></path>
            <path d="M720.7 575.9c-70.6 0-153.8-9.6-239.3-27.8-103.8-22.1-199.3-54.4-269.1-91-6.1-3.2-11.4-6.4-17-9.6l-41.8 182.4 67-52.1c32.3-25.2 79.8-12.3 95 25.7l21.7 54.1c7.2 17.8 30.4 22.2 43.5 8.3l28.4-30c32.1-34 88.9-21.2 103.4 23.2l13.1 40c6.1 18.6 29.6 24.3 43.5 10.6l34.4-33.9c32.5-32.1 87.4-18.9 101.8 24.4l25 75.1 46.2-201.8c-4.2 0.4-8 0.9-12.4 1.2-13.8 0.7-28.3 1.2-43.4 1.2z"
              fill="#FF5069" p-id="19161"></path>
            <path d="M824.3 365.1l-16.8 73.4c28.3 18 47.3 33 45.5 41.5-1.8 8.7-25.8 14.6-59.5 19.5l-16.9 73.7c87.5-7.6 137.1-33.8 146.5-78.3 10.5-49.1-33.4-93.2-98.8-129.8zM169 335.7c4.2-6.9 23.3-14.9 56.4-20l16.9-73.8C157.1 250 108.8 276 99.4 319.8c-9.2 43.3 23.3 86.2 95.8 127.7l16.6-72.7c-27.5-17.6-41.6-32-42.8-39.1z"
              fill="#00A9DC" p-id="19162"></path>
            <path d="M750.8 184.6l-361.7-82.8c-60.2-13.8-120.2 23.9-134 84.1l-43.3 188.9c49.2 31.4 141.8 73.1 284.4 103.4 138.8 29.5 238.7 29.9 297.2 21.4l30.8-134.5 10.6-46.5c13.9-60.2-23.7-120.2-84-134z"
              fill="#FF5069" p-id="19163"></path>
            <path d="M496.2 478.2C353.6 447.9 261 406.1 211.8 374.8l-16.6 72.7c5.6 3.2 10.9 6.4 17 9.6 69.8 36.6 165.3 68.9 269.1 91 85.5 18.2 168.7 27.8 239.3 27.8 15.1 0 29.6-0.4 43.5-1.3 4.4-0.3 8.2-0.8 12.4-1.2l16.9-73.7c-58.5 8.4-158.4 8-297.2-21.5z"
              fill="#8F3694" p-id="19164"></path>
            <path d="M132.9 414.2m-29.1 0a29.1 29.1 0 1 0 58.2 0 29.1 29.1 0 1 0-58.2 0Z" fill="#FDBA3E" p-id="19165"></path>
            <path d="M698.1 482.4m-47.6 0a47.6 47.6 0 1 0 95.2 0 47.6 47.6 0 1 0-95.2 0Z" fill="#FDBA3E" p-id="19166"></path>
          </svg>
        </StoreyTitle>
        <div class="video-preview">
          <div class="extension-video-item" v-for="(item,index) in videolist" :key="index">
            <!-- 上方图片 -->
            <div class="extension-top-img">
              <div class="topimg-box">
                <img class="extension-video-img" :src="item.img" alt="">
                <div class="extension-top-count">
                  <div class="count-left">
                    <span>
                      <i class="iconfont icon-bofangliang"></i>
                       {{item.count1}}
                    </span>
                   <!-- <span>
                      <i class="iconfont icon-dianzan"></i>
                      {{item.count2}}
                    </span> -->
                  </div>
                  <!-- <div class="count-right">
                    <span>{{item.time}}</span>
                  </div> -->
                </div>
                <!-- <i class="video-crown" :style="'background-image:url('+item.crown+')'" v-if="item.crown"></i> -->
                <!-- 动态背景图 -->
              <!--  <div class="extension-dynamic-bg" :style="'background-image:url('+item.bg+');background-position:-'+X*boxW+'px -'+Y*boxH+'px;'"
                  ref="extensionDynamicBg">
                  <div class="extension-dynamic-top">
                    <span :style="'width:'+speedBar+'%'"></span>
                  </div>
                </div> -->
                <!-- 弹幕 -->
              <!--  <div class="extension-danmu-content" ref="extensionDanmuContent">
                  <span class="extension-danmu-item"  v-for="(items,indexs) in item.list" :key="indexs" ref="extensionDanmuItem">{{items}}</span>
                </div> -->
              </div>
            <!--  <div class="extension-video-Later" @mousemove="laterMove(index)" @mouseout="laterOut(index)">
                <i class="iconfont icon-shaohouzaikanx1"></i>
                <span class="extension-video-latertext">稍后再看</span>
              </div> -->
            </div>
            <!-- 标题 -->
            <p class="extension-video-title" :title="item.title">{{item.title}}</p>
            <!-- 文字信息 -->
            <div class="extension-upname" v-if="item.state==0">
              更新至第{{item.num}}期
            </div>
            <div class="extension-upname" v-if="item.state==1">
              共{{item.num}}期
            </div>
          </div>
        </div>
      </div>
      <div class="classroom-right">
        <div class="classroom-right-header">快来哔哩哔哩课堂上课啦！</div>
        <RightRotation :rotationheight="rotationheight" :rotationlist="rotationlist"></RightRotation>
      </div>
    </div>
  </div>
</template>

<script>
  import StoreyTitle from '../public/StoreyTitle.vue'
  import RightRotation from '../public/RightRotation.vue'
  export default {
    name: 'ClassroomList',
    components: {
      StoreyTitle,
      RightRotation
    },
    data() {
      return {
        title: '课堂',
        rotationheight:'314px',
        rotationlist:[//右侧轮播数据
          {img:require('../../assets/img/dynamic_dls.jpg')},
        ],
        videolist: [{
            img: require('../../assets/img/douga_4k.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'0'
          },
          {
            img: require('../../assets/img/dynamiclist_lwdgz.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'1'
          },
          {
            img: require('../../assets/img/dynamic_almls.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'1'
          },
          {
            img: require('../../assets/img/dynamic_jojo.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'0'
          },
          {
            img: require('../../assets/img/dynamic_gmzr.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'1'
          },
          {
            img: require('../../assets/img/dynamic_hydxj.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'0'
          },
          {
            img: require('../../assets/img/extension_img1.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'1'
          },
          {
            img: require('../../assets/img/douga_jjdjr.jpg'),
            title: '全b站第一个4K蒸汽波！𝓼𝓾𝓶𝓶𝓮𝓻 𝓵𝓸𝓿𝓮🍭💗',
            name: '一个人的世界',
            count1: '390.7万',
            num:'12',
            state:'0'
          },
        ],
      }
    }
  }
</script>

<style scoped>
  .video-preview{
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 854px;
    height: 364px;
  }
  .extension-video-item {
    width: 206px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .extension-top-img {
    position: relative;
    width: 100%;
    height: 116px;
  }

  .topimg-box {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .topimg-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .5));
    border-radius: 0 0 2px 2px;
  }

  .extension-video-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }

  .extension-top-count {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    color: #fff;
    justify-content: space-between;
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    line-height: 16px;
  }
  .count-left{
    display: flex;
    align-items: center;
  }
  .count-left i{
    vertical-align: middle;
    font-size: 14px;
  }
  .video-crown{
    position: absolute;
    width: 40px;
    height: 24px;
    left:0;
    top:0;
    background-size: contain;
  }

  .extension-video-title {
    font-size: 14px;
    margin: 10px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
    white-space: nowrap;
    font-weight: 500;
    padding-right: 12px;
    transition: color .3s;
  }

  .extension-dynamic-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    border-radius: 2px;
    background-size: 2060px;
    /* transition: opacity .2s .2s; */
  }
  .extension-danmu-content{
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
    top:0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity .3s ;
    z-index: 20;
    opacity: 0;
  }
  .extension-danmu-item{
    position: absolute;
    color:#fff;
    white-space: pre;/*空白会被浏览器保留*/
    top: 8px;
    text-shadow: 1px 1px 2px #001;
    left: 100%;
    /* transition: left 4s linear; */
  }
  .extension-danmu-item:nth-child(even){
    top:28px;
  }

  .extension-dynamic-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    border-color: #000;
    border-style: solid;
    border-width: 4px 8px;
    background: #444;
    box-sizing: border-box;
  }

  .extension-dynamic-top>span {
    display: block;
    background: #fff;
    height: 2px;
    transition: width .1s;
  }

  .extension-upname {
    /* margin-top: 60px; */
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
    line-height: 16px;
  }

  .extension-upname>i {
    vertical-align: middle;
    margin-right: 4px;
  }

  .extension-video-Later {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    right: 8px;
    bottom: 8px;
    text-align: center;
    line-height: 28px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity .2s .2s;
    z-index: 20;
  }

  .extension-video-Later>i {
    font-size: 28px;
  }

  .extension-video-latertext {
    position: absolute;
    left: -19px;
    top: -28px;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, .8);
    line-height: 18px;
    z-index: 30;
    transform: scale(0);
    transition: all .2s;
  }

  .extension-top-img:hover .extension-video-Later {
    opacity: 1;
  }

  .extension-video-title:hover {
    color: #00A1D6;
  }

  .extension-top-img:hover .extension-top-count {
    /* display: none; */
  }

  .extension-top-img:hover .extension-dynamic-bg {
    opacity: 1;
  }

  .extension-video-Later:hover .extension-video-latertext {
    transform: scale(1);
  }

  .dynamicActive {
    opacity: 0 !important;
  }
/*
  .extension-upname:hover{
    color:#00A1D6;
  } */
  /* .extension-top-img:hover .extension-danmu-item{
    left: -100%;
  } */
  .extension-top-img:hover .extension-danmu-content{
    opacity: 1;
  }


  .classroom-right{
    width: 320px;
  }
  .classroom-right-header{
    height: 36px;
    margin-bottom: 16px;
    font-size: 20px;
    color:#212121;
    line-height: 36px;
  }
</style>
<style>
  .ClassroomList .el-carousel__indicators{
    display: none;
  }
</style>
